<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素(pseudo-elements)</title>
        <style type="text/css">
            .teng-wang-ge-xu { border: 1px solid blue ; width: 80% ; margin: 25px 0 ; }
            /* 使用伪元素时建议使用 :: 为前缀，比如 ::first-line  */
            .teng-wang-ge-xu::first-line { background-color: #FFFF00 ;  }
            /* 但是 CSS 仍然支持 以 : 为前缀的用法，比如 将 ::first-letter 写作 :first-letter 也是可以的 */
            .teng-wang-ge-xu:first-letter { color: #9932CC ; font-size: 50px ; }

            .second { border: 1px solid green ; width: 80% ; margin: 25px 0 ; }
            /* 亲子选择器 ( 我们称作 亲子选择器 或 直接子元素选择器 ，鬼子那边叫做 child combinator )*/
            .second>span {
                display: inline-block ;
                border: 1px solid blue ;
                margin: 10px ;
                vertical-align: top ;
            }

            /* 在 .second 元素内部的所有子元素之前(before)插入一个 "元素" */
            .second::before {
                content: "这里是添加的内容" ;
                display: inline-block ;
                border: 1px solid red ;
                margin: 10px ;
                vertical-align: top ;
            }

            /* 在 .second 元素内部的所有子元素之后(after)插入一个 "元素" */
            .second::after {
                content: '' ; /* 单引号 、双引号 均可 */
                display: inline-block ;
                margin: 10px ;
                width: 55px ;
                height: 55px ;
                vertical-align: top ;
                background-color: #ff740f;
                background-image: url("mi-logo.png");
            }

            .third {
                position: relative ; /* 作为父元素采用相对定位是为了让子元素相对于自己进行定位*/
                border: 1px solid red ; width: 80% ; margin: 100px 0 ;
            }

            .third>span { display: inline-block ;  border: 1px solid blue ; margin: 10px ;  vertical-align: top ; }

            .third::before {
                content: '' ; /* 要写 content ，但取值可以是空串 */
                display: block ; /* 以块元素形式存在 */
                width: 100% ; /* 使用绝对定位后一定要指定宽度 */
                height: 50px ;
                background-color: #FFFF00;
                position: absolute ;
                top : -51px ;
                left : 0 ;
            }

            .third::after {
                content: '' ; /* 要写 content ，但取值可以是空串 */
                display: block ; /* 以块元素形式存在 */
                width: 100% ; /* 使用绝对定位后一定要指定宽度 */
                height: 50px ;
                background-color: #ff740f;
                position: absolute ;
                bottom : -51px ;
                left : 0 ;
            }
        </style>
    </head>
    <body>

        <h3>伪元素( Pseudo-elements )</h3>

        <ul>
            <li>::first-letter 可以选择某段文本中的第一个字符</li>
            <li>::first-line 可以选择某段文本中的第一行文本</li>
            <li>::before 可以在指定元素内部的所有子元素之前(before)插入一个 "元素"</li>
            <li>::after 可以在指定元素内部的所有子元素之后(after)插入一个 "元素"</li>
        </ul>

        <p>伪元素可以当做一个元素来使用，可以使用 display 设置其是否是 内联元素 或 块元素 ，也可以通过CSS设置其它属性</p>

        <p class="teng-wang-ge-xu">
            豫章故郡，洪都新府。星分翼轸，地接衡庐。
            襟三江而带五湖，控蛮荆而引瓯越。
            物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
            雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。
            都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。
            十旬休假，胜友如云；千里逢迎，高朋满座。
            腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。
            家君作宰，路出名区；童子何知，躬逢胜饯。
            时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
            俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
            层峦耸翠，上出重霄；飞阁流丹，下临无地。
            鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
            披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。
            闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。
            云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。
            渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
            遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
            睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
            四美具，二难并。穷睇眄于中天，极娱游于暇日。
            天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
            望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。
            关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。
            怀帝阍而不见，奉宣室以何年？
        </p>

        <div class="second">
            <span>落霞与孤鹜齐飞</span>
            <span>秋水共长天一色</span>
        </div>

        <div class="third">
            <span>落霞与孤鹜齐飞</span>
            <span>秋水共长天一色</span>
        </div>

    </body>
</html>